<template>
  <div class="foot">
    <div class="top">底部区域</div>
    <MyButton />
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
/* 正常来说，在任意组件里面 写的style都是作用于全局，就是任何样式在任何页面都会生效 */
/* 为了避免冲突，样式的覆盖。我们一般是在当前组件里面 style上面添加scoped属性。这样当前页面的样式只针对于当前组件生效，其他页面看不到这个样式 */
.foot {
  padding: 15px;
  background-color: lightgrey;
}
.top {
  color: pink;
  font-size: 30px;
}
</style>